@extends('home.layout.base')
@section('styles')

@endsection
@section('scripts')
    <script src="{{ asset('js/velocity.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/shutter.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: null,
                    hasData: true, //加载更多开关
                    noData: false, //没有数据开关
                    loading: false,//加载loading开关
                    params:{page : 1, cateid : 0, catepid : 0,position:1},
                }
            },
            created(){
                this.list();
            },
            methods: {
                list() {
                    let that = this;
                    this.hasData = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.new.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            that.loading = false;
                            if(that.params.page == that.pageData.last_page){
                                that.noData = true;
                                that.hasData = false;
                            }else{
                                that.noData = false;
                                that.hasData = true;
                            }
                            that.params.page ++;
                        })
                    },300);
                },
                info(id) {
                    window.location.href = "{{ route('home.new.info') }}"+'?id='+id;
                },
                paginate(){
                    this.hasData = false;
                    this.list();
                }
            }
        });
        $(function () {
            $('.shutter').shutter({
                shutterW: 560, // 容器宽度
                shutterH: 326, // 容器高度
                isAutoPlay: true, // 是否自动播放
                playInterval: 3000, // 自动播放时间
                curDisplay: 0, // 当前显示页
                fullPage: false, // 是否全屏展示
            });
            $('.main-new-menu-icon').click(function(){
                if($(this).hasClass('fa-angle-down')){
                    $(this).removeClass("fa-angle-down").addClass("fa-angle-up");
                    $('li.li-none').show();
                }else{
                    $(this).removeClass("fa-angle-up").addClass("fa-angle-down");
                    $('li.li-none').hide();
                }
            });
            $('.main-new-menu li').click(function(){
                $(this).siblings().children('a').removeClass("active");
                $(this).children('a').addClass("active");
                //子类默认全部
                $('.main-new-child-menu li').siblings().removeClass("active");
                $('.main-new-child-menu li:first-child').addClass("active");
                app.listData = [];
                app.noData = false;
                app.hasData = false;
                app.params.cateid = 0;
                app.params.page = 1;
                let pid = parseInt($(this).attr('data-pid'));
                if(pid > 0){
                    app.params.catepid = pid;
                    app.params.position = 0;
                    $('.main-new-child-menu').hide();
                    $('#pid-'+pid).show();
                }else{
                    $('.main-new-child-menu').hide();
                    app.params.catepid = 0;
                    app.params.position = 1;
                }
                app.list();
            });
            $('.main-new-child-menu li').click(function(){
                $(this).siblings().removeClass("active");
                $(this).addClass("active");
                app.params.page = 1;
                app.listData = [];
                app.noData = false;
                app.hasData = false;
                let id = parseInt($(this).attr('data-id'));
                if(id > 0){
                    app.params.cateid = id;
                }else{
                    app.params.cateid = 0;
                }
                app.list();
            });
        });
    </script>
@endsection
@section('content')
    <div class="container main">
        <div class="row">
            <div class="col-lg-8 main-left">
                <div class="col-lg-12 main-new-menu">
                    <ul>
                        <li data-pid="0"><a class="active" href="javascript:void(0)">推荐阅读</a></li>
                        @foreach($news_category as $key=>$cate)
                            <li @if($key>6) class="li-none" @endif data-pid="{{$cate['id']}}"><a href="javascript:void(0)">{{$cate['name']}}</a></li>
                        @endforeach
                    </ul>
                    <i class="fa fa-angle-down main-new-menu-icon"></i>
                </div>
                <div class="col-lg-12 main-banner">
                    <div class="col-lg-8 main-banner-left">
                        <div class="shutter">
                            <div class="shutter-img">
                                @foreach($news_position as $k=>$position)
                                    @if($k < 5)
                                        <a href="{{ route('home.new.info',['id'=>$position['id']]) }}" data-shutter-title="{{$position['title']}}"><img src="{{$position['thumb']}}" alt="#"></a>
                                    @endif
                                @endforeach
                            </div>
                            <ul class="shutter-btn">
                                <li class="prev"></li>
                                <li class="next"></li>
                            </ul>
                            <div class="shutter-desc">
                                <p>{{ $news_position[0]['title'] }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 main-banner-right">
                        <div class="main-banner-right-item">
                            <a href="{{ route('home.new.info',['id'=>$news_position[5]['id'] ]) }}">
                                <img src="{{ $news_position[5]['thumb']  }}" alt="">
                                <div class="main-banner-right-title">
                                    {{ $news_position[5]['title']  }}
                                </div>
                            </a>
                        </div>
                        <div class="main-banner-right-item">
                            <a href="{{ route('home.new.info',['id'=>$news_position[6]['id'] ]) }}">
                                <img src="{{ $news_position[6]['thumb']  }}" alt="">
                                <div class="main-banner-right-title">
                                    {{ $news_position[5]['title']  }}
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 main-list-item" id="app" v-cloak>
                    @foreach($news_category as $key=>$cate)
                        @if(isset($cate['children']) && count($cate['children'])>0)
                        <div class="col-lg-12 main-new-child-menu" id="pid-{{$cate['id']}}">
                            <ul >
                                <li class="active" data-id="0">全部</li>
                                @foreach($cate['children'] as $child)
                                    <li data-id="{{$child['id']}}"><img src="{{$child['avatar']}}" alt="">{{$child['name']}}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                    @endforeach
                    <div v-for="items in listData" class="item-article" @click="info(items.id)">
                        <div class="item-article-img">
                            <span class="tag-name" v-if="items.cate_child">@{{ items.cate_child.name }}</span>
                            <span class="tag-name none" v-else></span>
                            <img :src="items.thumb" alt="">
                        </div>
                        <div class="item-article-info">
                            <p class="item-article-info-title">@{{ items.title }}</p>
                            <p class="item-article-info-note">@{{ items.summary }}</p>
                            <p class="item-article-info-other">
                                <img :src="items.user.avatar" alt="">
                                <span class="item-article-info-other-name">
                                        @{{ items.user.truename }} <em>.</em> @{{ moment(items.created_at).format('YYYY-MM-DD') }}<i></i>
                                    </span>
                                <span class="item-article-info-other-view"><i class="fa fa-thumbs-o-up"></i> @{{ items.praise }}&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-eye"></i> @{{ items.view }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12 text-center" v-show="hasData">
                        <button class="item-article-more" @click="paginate">加载更多 >> </button>
                    </div>
                    <div class="col-lg-12 text-center" v-show="loading"><i class="fa fa-spinner fa-pulse"></i></div>
                    <div class="col-lg-12 text-center" v-show="noData" style="padding: 25px 0"><span>没有更多了</span></div>
                </div>
            </div>
            <div class="col-lg-4 main-right">
                @include('home.layout.right')
            </div>
        </div>
    </div>
@endsection

